<template>
   <el-aside :width="isCollapse? '64px':'200px'">
                <div @click="isCollapse=!isCollapse" class="aside_position">|||</div>
                <el-menu
                    default-active="activePath"
                    class="el-menu-vertical-demo"                   
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :unique-opened='true'
                    :router='true'
                    :collapse='isCollapse'
                    :collapse-transition='false'>
                    <template v-for="item in items" >
                        <el-menu-item :index="item.index" :key="item.index" @click="changeActive('/'+item.index)">
                            <i :class=item.icon></i>
                            <span slot="title">{{item.title}}</span>
                        </el-menu-item>                  
                    </template>     
                </el-menu>
                
    </el-aside>
</template>

<script>
import bus from './bus'

export default {
data(){
    return{
        activePath:"",
        isCollapse:false,
        path:"",
        items: [
                    {
                        icon: 'el-icon-s-home',
                        index: 'dashboard',
                        title: '系统首页'
                    },
                    {
                        icon: 'el-icon-s-order',
                        index: 'cate',
                        title: '分类管理'
                    },{
                        icon: 'el-icon-s-comment',
                        index: 'article',
                        title: '文章管理'
                    },{
                        icon: 'el-icon-edit-outline',
                        index: 'info',
                        title: '博客信息管理'
                    },
                  {
                        icon: 'el-icon-s-custom',
                        index: 'admin',
                        title: '管理员管理'
                    },
                ]
    }
},
created(){
    this.activePath = window.localStorage.getItem('path')
    // window.localStorage.getItem('path')
    this.$route.fullPath

},
methods:{
    changeActive(path){
                window.localStorage.setItem('path',path)
                this.activePath = path
            }
}

}
</script>

<style>
.aside_position{
  text-align: center;
}
</style>